<template>
  <div class="Back">
    <div class="loader" v-if="loading">
      <span style="color: #6f6f6f; font-size: 14px">{{ message }}</span>
      <svg width="100" height="100">
        <polygon
          class="triangle"
          fill="none"
          stroke="#7eccd8"
          stroke-width="4"
          points="50,1 99,99 1,99"
        />
      </svg>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { defineProps } from "vue";
const props = defineProps({
  loading: {
    type: Boolean,
    default: false,
  },
  message: {
    type: String,
    default: "加载中...",
  },
});
</script>
<style>
.Back {
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(255, 255, 255, 0.5);
}
.loader {
  text-align: center;
  width: 200px;
  height: 200px;
  position: absolute;
  right: 0;
  left: 0;
  margin: auto;
  top: 0;
  bottom: 0;
  z-index: 3;
}
.loader .triangle {
  stroke-dasharray: 50 30;
  -webkit-animation: dash 2.5s cubic-bezier(0.35, 0.04, 0.63, 0.95) infinite;
  -moz-animation: dash 2.5s cubic-bezier(0.35, 0.04, 0.63, 0.95) infinite;
  -ms-animation: dash 2.5s cubic-bezier(0.35, 0.04, 0.63, 0.95) infinite;
  -o-animation: dash 2.5s cubic-bezier(0.35, 0.04, 0.63, 0.95) infinite;
  animation: dash 2.5s cubic-bezier(0.35, 0.04, 0.63, 1) infinite;
}
@-webkit-keyframes dash {
  to {
    stroke-dashoffset: 400;
  }
}
@-moz-keyframes dash {
  to {
    stroke-dashoffset: 400;
  }
}
@-ms-keyframes dash {
  to {
    stroke-dashoffset: 400;
  }
}
@-o-keyframes dash {
  to {
    stroke-dashoffset: 400;
  }
}
@keyframes dash {
  to {
    stroke-dashoffset: 400;
  }
}
</style>
